<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 70px;
        background-color: rgb(248, 193, 193);
    }
.linear{
    /* 相同速度 */
   transition: width 2s linear 1s; 
}
.ease-in{
    /* 慢速开始 */
    transition: width 2s ease-in 1s;
}
.ease-out{
    /* 慢速结束 */
    transition: width 2s ease-out 1s;
}
.ease-in-out{
    /* 慢速开始结束 */
    transition: width 2s ease-in-out 1ps;
}
.ease{
    /* 慢速开始中间变快慢速结束 */
    transition: width 2s ease 1s;
}
div:hover{
    width: 700px;
}
</style>
<body>
    <div class="ease">1</div>
    <div class="ease-in">2</div>
    <div class="ease-in-out">3</div>
    <div class="ease-out">4</div>
    <div class="linear">5</div>

</body>
</html>